<template>
  <div class="m-login">
    <a-card title="登录" style="width: 320px">
    <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="用户账号"
      name="userName"
      :rules="[{ required: true, message: '登录账号不能为空!' }]"
    >
      <a-input 
      placeholder="请输入用户账号"
      v-model:value="formState.userName"
       />
    </a-form-item>

    <a-form-item
      label="登录密码"
      name="password"
      :rules="[{ required: true, message: '登录密码不能为空!' }]"
    >
      <a-input-password 
      placeholder="请输入登录密码"
      v-model:value="formState.password" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
    </a-form>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '/@/store/modules/user';
import { message } from 'ant-design-vue';
import { useMenuStore } from '/@/store/modules/menu';
const userStore = useUserStore()
const menuStore = useMenuStore()
const router = useRouter()
interface FormState {
  userName: string;
  password: string;
  remember: boolean;
}
const formState = reactive<FormState>({
      userName: '',
      password: '',
      remember: true,
    });
const onFinish = (values: any) => {
  userStore.login(
    values.userName,
    values.password
  ).then(()=>{
    message.success('登录成功！')
    // 初始化权限标识
    userStore.initPermCode().then(()=>{
      // 初始化菜单
      menuStore.initMenu()
      router.replace({
        path: '/'
      })
    })
    // 初始化用户信息
    userStore.getUserInfo()
  }).catch((e:Error)=>{
    message.error(e.message)
  })
};
const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const token = computed(()=>{
  return userStore.getToken
})
</script>
<style lang="less" scoped>

</style>